<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				border: 0;
			}

			html,
			body {
				height: 100%;
				overflow: hidden;
			}

			#tsj {
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				margin: auto;
				width: 48px;
				height: 48px;
				background: url(img/animation.png) no-repeat;
				background-position: 0 0;
				/*
				总共动画有13帧，那么最后一帧是end，这样就不会出现空白图片。
				如果是start，那么第一帧肯定是空白图片。
				*/
				animation: move .8s steps(12, end) infinite;
			}

			@keyframes move {
				from {
					background-position: 0 0;
				}

				to {
					background-position: -576px 0;
				}
			}
		</style>
	</head>
	<body>
		<div id="tsj">

		</div>
	</body>
</html>
